export default `<template>
<div id="map" class="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import { Tile as TileLayer } from "ol/layer";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { DragRotateAndZoom } from "ol/interaction";
import { OverviewMap, defaults as defaultControls } from "ol/control";

import CONSTANT from "@/config/constant.js";

export default {
name: "overviewMap",

methods: {
  createMap(divId) {
    var overviewMapControl = new OverviewMap({
      className: "ol-overviewmap ol-custom-overviewmap",
      layers: [
        new TileLayer({
          source: new TileArcGISRest({
            url: CONSTANT.GIS_URL
          })
        })
      ],
      collapseLabel: "\u00BB", //鹰眼展开时功能按钮上的标识
      label: "\u00AB", //鹰眼折叠时功能按钮上的标识
      collapsed: false //初始为展开显示方式
    });

    var map = new Map({
      controls: defaultControls().extend([overviewMapControl]), //第一种
      target: "map",
      layers: [
        new TileLayer({
          source: new TileArcGISRest({
            url: CONSTANT.GIS_URL
          })
        })
      ],
      view: new View({
        center: [113.0567, 23.67537],
        maxZoom: 18,
        minZoom: 8,
        zoom: 13,
        projection: "EPSG:4326"
      })
    });

    //第二种
    //map.addControl(overviewMapControl)
  }
},

mounted() {
  this.createMap("map");
}
};
</script>

<style lang="less" scoped>
.map {
height: 100%;

/deep/ .ol-custom-overviewmap,
/deep/ .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}
/deep/ .ol-custom-overviewmap {
  &:not(.ol-collapsed) {
    border: 1px solid black;
  }
  .ol-overviewmap-map {
    border: none;
    width: 300px;
  }
  .ol-overviewmap-box {
    border: 2px solid red;
  }
  &:not(.ol-collapsed) button {
    bottom: auto;
    left: auto;
    right: 1px;
    top: 1px;
  }
}

/deep/ .ol-rotate {
  top: 170px;
  right: 0;
}
}
</style>
`